<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业3样式.css">
    
</head>
<body>
    <div class="box">
        <div class="son">
            <p>来，说说你在干什么在想什么</p>
        <input type="text" class="nc"> &nbsp;<img src="./吴亦凡.webp">
        <img src="./吴亦凡.webp">
        <img src="./蔡徐坤.webp">
        <img src="./蔡徐坤.webp">
        <img src="./吴亦凡.webp">
        <img src="./吴亦凡.webp">
        <img src="./蔡徐坤.webp">
        <img src="./蔡徐坤.webp">
        <img src="./吴亦凡.webp"><br>
        <textarea class="p1"></textarea><br>
        <button class="s1" onclick="add()">发布</button>
        
        <ul>
                
        </ul>
        </div>
        
    </div>
</body>
</html>
<script>
       var nc=document.querySelector('.nc')
       var p1=document.querySelector('.p1')
       var ul=document.querySelector('ul')
       var img=document.querySelectorAll('img')
       var son=document.querySelector('.son')
       function getDate(){
        var date=new Date()
        var y=date.getMonth()+1
        var r=date.getDate()
        var h=date.getHours()
        var m=date.getMinutes()
        return `${y}月 ${r}日 ${h}:${m}`
       }
       var time=getDate()
       
       
       function add(){
        //创建
        var li=document.createElement('li')
        //赋值
        if(p1.value.trim()==''){
            alert('内容为空，不能添加')
            return
        }
        li.innerHTML=`
            <img src="${tp}">
            <p>${nc.value}说:${p1.value}<br>
            <span class="b1">${time}</span></p>
            <button onclick="del(this)"">删除</button>
        `;
        //添加
        ul.insertBefore(li,ul.children[0])
        p1.value=''
        nc.value=''
        p1.focus()
        nc.focus()
       }
       function del(aaa){
        ul.removeChild(aaa.parentNode)
       }
       for(i=0;i<img.length;i++){
        
           img[i].onclick=function(){ 
            tp=this.src;
            for(i=0;i<img.length;i++){
            img[i].style.border=''
        }
            this.style.border='3px solid red';
           }
       }
       console.log(img.src);
       


</script>